<template>
  <Dialog ref="dialogRef" :fields="fields" :field-info="fieldInfo" :dialog-config="dialogConfig" :rules="registerRules">
    <template #header>
      <div class="header-container">
        <img src="@/assets/logo_black.png" class="logo-image" />
        <div class="title">注册</div>
      </div>
    </template>
    <template #footer>
      <div class="button-container">
        <el-button type="primary" link @click="jumpLogin" class="immediately">已有账号？立即登录</el-button>
        <el-button type="primary" @click="handleRegister" class="handleLogin">注册</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import Dialog from '@/components/dialog/Dialog.vue'
import { ref, inject } from 'vue'
import { useLoginRegStore } from '@/stores/user/loginreg/index.js'
import { ElMessage } from 'element-plus'
import { Log } from '@icon-park/vue-next'
/* 传递给子组件的变量 */
// 弹窗大小设置
const dialogConfig = {
  dialogHeight: '510px',
  dialogWidth: '400px',
  tabSize: '16px'
}
// 内容部分
const fields = ref([
  { type: 'input', prop: 'userName', label: '用户名', placeholder: '请输入用户名' },
  {
    type: 'radio',
    prop: 'gender',
    label: '性别',
    radios: [
      { label: '男', name: '男' },
      { label: '女', name: '女' }
    ]
  },
  { type: 'input', prop: 'phone', label: '手机号', placeholder: '请输入手机号' },
  { type: 'input', prop: 'password', label: '密码', placeholder: '请输入密码', isPassword: true },
  { type: 'input', prop: 'confirmPassword', label: '确认密码', placeholder: '请确认密码', isPassword: true }
])
const fieldInfo = ref({ userName: '', gender: '', phone: '', password: '' }) // 字段默认值
//注册验证规则
const registerRules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/, message: '长度为4-10个字符,只包含字母、数字和汉字', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' } // 必填验证
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /.{6,}/, message: '请输入至少六位字符作为密码', trigger: 'blur' }
  ],

  confirmPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /.{6,}/, message: '请输入至少六位字符作为密码', trigger: 'blur' }
  ]
}

const dialogRef = ref(null)
/* 暴露出的方法 */
// 打开注册弹窗
const openRegisterDialog = () => {
  dialogRef.value.openDialog()
}
defineExpose({
  openRegisterDialog
})
/* 本界面变量及函数 */
const LoginRegStore = useLoginRegStore() // 获取登录注册的方法
const openLogin = inject('openLogin') // 注入打开登录弹窗方法
// 跳转登录页面
const jumpLogin = () => {
  dialogRef.value.closeDialog()
  openLogin()
}
// 注册处理
const handleRegister = async () => {
  const registerData = await dialogRef.value.submitForm() // 获得登录表单数据
  if (!registerData) {
    ElMessage.error('请先通过表单验证')
    return
  }
  LoginRegStore.postRegister(registerData) // 发送api请求
    .then(async () => {
      jumpLogin()
      ElMessage.success('注册成功,请登录')
    })
    .catch((error) => {
      // console.log(error)
      ElMessage.error(error.msg || error)
    })
}
</script>
<style scoped>
.header-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 10px;
  margin-bottom: 0px; /* 调整标题与表单之间的距离 */
}
.logo-image {
  width: 50px; /* 设置图片宽度，可以根据需要调整 */
  height: auto; /* 设置自动计算高度，保持宽高比 */
  margin-right: 100px; /* 设置图片与标题之间的右侧间距 */
}
.title {
  font-size: 20px; /* 设置标题字体大小，可以根据需要调整 */
}

.button-container {
  margin-top: -60px; /* 负的上边距值，使按钮往上移动 */
}

.handleLogin {
  margin-left: 0; /* 移除原有的左边距 */
  margin-right: 33px; /* 添加右边距 */

  font-size: 14px; /* 设置按钮字体大小 */
  padding: 20px 126px; /* 设置按钮内边距，即按钮大小 */
}
.immediately {
  margin-right: 20px;
  margin-bottom: 10px;
}
/* 添加顶部边距以减小用户名文本框与分割线之间的距离 */
</style>
